import {Alert,View, Text, Button} from "react-native";
import React, { Component } from "react";
import {Tab} from "@rneui/themed";
import BaseForm from "../../../../components/elements/BaseForm";
import account from '../api/account';
import PasswordEncoder from "../api/PasswordEncoder";

export default class ChangePassword extends Component {
  constructor(props) {
    super(props);
      this.state = {
          account:'',
      };
      this.userInfoForm = React.createRef();
      this.save = this.save.bind(this);
  }

    componentDidMount() {
        let {route} = this.props;
        if (route.params) {
            let account = route.params.account;
            this.setState({
                account: account,
            });
            this.userInfoForm.current.setFormData({account:account});
        }
    }

    async save(formData) {
        await account.changePassword(
            this.state.account,
            {
                account: this.state.account,
                oldPassword: PasswordEncoder.encode(this.state.account, formData.oldPassword),
                password: PasswordEncoder.encode(this.state.account, formData.password),
                rePassword: PasswordEncoder.encode(this.state.account, formData.rePassword)
            }
        );
        this.props.navigation.navigate('Login');
    }

    render() {
      let _this = this;
        const passWordFormColumn = [
            {
                type: 'TextInput',
                field: 'account',
                title: '用户名',
                editable: false,
                required: true,
            },
            {
                type: 'TextInput',
                field: 'oldPassword',
                title: '旧密码',
                editable: true,
                required: true,
                security: true,
            },
            {
                type: 'TextInput',
                field: 'password',
                title: '新密码',
                editable: true,
                required: true,
                security: true,
            },
            {
                type: 'TextInput',
                field: 'rePassword',
                title: '确认密码',
                editable: true,
                required: true,
                security: true,
            },
        ];
        const passWordOperation = [
            {
                text: '保存',
                style: {backgroundColor: 'red'},
                async callback(p) {
                    await _this.save(p);
                },
            },
        ];
        return (
            <View
                style={{
                    flexDirection: 'column',
                    height: '100%',
                    backgroundColor: '#f5f5f5',
                }}>
                <View style={{marginTop: '5%'}}>
                    <BaseForm
                        ref={this.userInfoForm}
                        formColumn={passWordFormColumn}
                        operation={passWordOperation}
                    />
                </View>
            </View>
        );
    }
}
